import React,{ Component } from 'react'
import{ 
    PopStyle,
    PopUlStyle,PopLiStyle,PopImgStyle,
    PopLeftStyle,PopRightStyle
   } from './PopStyle'

 import { Link } from 'react-router-dom'  

import HomeCommon from 'pages/home/HomeCommon'

import Footer from 'components/common/footer/Footer'




const Item = ( props ) => {
    return (
           <PopLiStyle>

           <Link to={"/monbabydetail/"+props.label}>

           <PopImgStyle>
               <img src={ props.image_url_set.main[640] }/>
           </PopImgStyle>

           <PopLeftStyle>
               <h1>{ props.title }</h1>
               <div className="time">
                   仅剩00天23小时20分
               </div>
           </PopLeftStyle>

           <PopRightStyle>
               <img src={ props.image_url_set.brand[800] }/>
           </PopRightStyle>
           </Link>

       </PopLiStyle>
    )
}

class Pop extends Component{



   componentDidMount () {
       this.props.getPopLists(1)
       this.props.change_title('名品特卖')
       //pop_lists
   }


   renderItem = () => {
       return this.props.pop_lists && this.props.pop_lists.map(  item => {
           return <Item key={item.label} {...item}/>
       })
   }

   render ( ) {
       return (
           <PopStyle>
              
               <PopUlStyle>
                   
                   {
                       this.renderItem()
                   }
               </PopUlStyle>
                   <Footer/>
               
           </PopStyle>
       )
   }
}

export default HomeCommon(Pop)